<template>
  <!--<div class="go-top">-->
    <!--<button @click="goTop" ref="btn" title="回到顶部"></button>-->
  <!--</div>-->
  <div>
    <div class="scroll" :class="{show:isActive}">
		 <!-- <div style="width: 50px;height: 50px;background: #008;z-index: 10000;">{{step}}</div> -->
      <div id="toTop" @click="toTop(ii)">&lt;</div>
      <div id="toBottom" @click="toBottom(ii)">&gt;</div>
	 
    </div>
		
  </div>

</template>

<script>
    export default {
        name: "goTop",
      // data() {
      //   return {
      //     isTop: true,
      //     timer: null
      //   }
      // },
      // mounted() {
      //   this.needScroll()
      // },
      // methods: {
      //   needScroll () {
      //     let clientHeight = document.documentElement.clientHeight;
      //     let obtn = this.$refs.btn
      //     window.onscroll = function () {
      //       let osTop = document.documentElement.scrollTop || document.body.scrollTop;
      //       if (osTop >= clientHeight) {
      //         obtn.style.display = 'block'
      //       } else {
      //         obtn.style.display = 'none'
      //       }
      //       if (!this.isTop) {
      //         clearInterval(this.timer)
      //       }
      //       this.isTop = false
      //     }
      //   },
      //   goTop () {
      //     this.timer = setInterval(() => {
      //       let osTop = document.documentElement.scrollTop || document.body.scrollTop;
      //       let ispeed = Math.floor(-osTop / 5)
      //       document.documentElement.scrollTop = document.body.scrollTop = osTop + ispeed;
      //       this.isTop = true
      //       if (osTop === 0) {
      //         clearInterval(this.timer)
      //       }
      //     }, 30)
      //   }
      // },
      props:{
        step:{   //此数据是控制动画快慢的
          type:Number,
          default:50
        }
      },
      data(){
        return {
          isActive:false,
		  ii:50,
        }
      },
	  props:['st_bool'],
      methods:{
        toTop(i){
			if(this.st_bool==undefined){
				//参数i表示间隔的幅度大小，以此来控制速度
				document.documentElement.scrollTop-=i;
				if (document.documentElement.scrollTop>0) {
				  var c=setTimeout(()=>this.toTop(i),16);
				}else {
				  clearTimeout(c);
				}
			}else{
				this.$emit('toTop',i);
			}
          
        },
        toBottom(i){
		 if(this.st_bool==undefined){
		 	var clientHeight=document.documentElement.clientHeight||document.body.clientHeight;
		 	var scrollHeight=document.documentElement.scrollHeight;
		 	var height=scrollHeight-clientHeight; //超出窗口上界的值就是底部的scrolTop的值
		 	document.documentElement.scrollTop+=i;
		 	if (document.documentElement.scrollTop<height) {
		 	  var c=setTimeout(()=>this.toBottom(i),16);
		 	}else {
		 	  clearTimeout(c);
		 	}
		 }else{
		 	this.$emit('toBottom',i);
		 }
		  
        }
      },
	  watch:{
		 'st_bool':function(newVal,oblVal){
			this.isActive=newVal
		 } 
	  },
      created(){
        var vm=this;
		if(vm.st_bool==undefined){
			window.onscroll=function(){
			  if (document.documentElement.scrollTop>60) {
			    vm.isActive=true;
			  }else {
			    vm.isActive=false;
			  }
			}
		}
		console.log(this.$refs.wrapper)
      }
    }
</script>
<style scoped>
  .scroll{
    width: 0.3rem;
    height: 0.6rem;
    cursor: pointer;
    display: none;
    position: fixed;
    right:0.1rem;
    bottom:0.7rem;
	z-index: 10000;
  }
  .scroll>div{
    width: 0.3rem;
    height: 0.3rem;
    transform: rotate(90deg);
    text-align: center;
    font-size:0.26rem;
    font-family: "黑体";
    background-color: rgba(0,0,0,.2);
    color: #fff;
  }
  .scroll>div:hover{
    background-color: rgba(0,0,0,.5);
  }
  .show{
    display: block;
  }
</style>



